<template>
  <a-menu
    class="left-menu"
    v-model="selectedKeys"
    :open-keys.sync="menuOpenKeys"
    mode="inline">

    <template v-for="menu of menuList">
      <low-app-sub-menu :menu="menu" :menuType="menuType" :open-keys="menuOpenKeys" :devMode="devMode" v-on="$listeners"/>
    </template>

    <template v-if="devMode">
      <a-menu-divider/>
      <a-sub-menu key="app-system">
        <span slot="title"><a-icon type="setting"/><span>系统配置</span></span>
        <template v-for="(value,key) of appSystemMenu">
          <a-menu-item :key="key">
            <router-link :to="{path:value.path}">{{ value.name }}</router-link>
          </a-menu-item>
        </template>
      </a-sub-menu>
      <a-menu-item :key="recycleBinMenu.key">
        <router-link :to="{path:recycleBinMenu.path}">
          <a-icon type="delete"/>
          回收站
        </router-link>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>
import LowAppSubMenu from './LowAppSubMenu'
import LowAppMenuItem from './LowAppMenuItem'
import LowAppMenuType from '../constant/LowAppMenuType'
import {pushIfNotExist} from '@/utils/util'
import {recursionMenuList} from '../utils/lowAppUtils'

export default {
  name: 'LowAppLeftMenu',
  components: {LowAppMenuItem, LowAppSubMenu},
  props: {menuList: Array, devMode: Boolean},
  data() {
    return {
      selectedKeys: [],
      menuOpenKeys: [],
      menuType: LowAppMenuType,
    }
  },
  computed: {
    appId: {
      get() {
        return this.$route.params.appId
      }
    },
    appSystemMenu() {
      let appId = this.appId
      return {
        'app-system-cgform': {name: 'Online表单', path: `/app/${appId}/list/cgform`},
        'app-system-desform': {name: '设计器表单', path: `/app/${appId}/list/desform`},
        'app-system-cgreport': {name: 'Online报表', path: `/app/${appId}/list/cgreport`},
        'app-system-graphreport': {name: 'Online图表', path: `/app/${appId}/list/graphreport`},
      }
    },
    recycleBinMenu() {
      return {key: 'app-menu-recycle-bin', path: `/app/${this.appId}/menu/recycleBin`}
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.autoSelectedKeys()
      }
    },
    menuList: {
      immediate: true,
      handler() {
        this.initRouterLink()
      }
    },
  },
  created() {
  },
  methods: {

    /** 初始化菜单的路由地址 */
    initRouterLink() {
      recursionMenuList(this.menuList, (menu, parent) => {
        if (menu.type === LowAppMenuType.GROUP.type) {
          // 默认展开第一个应用分组（如果没有就不展开）
          if (this.menuOpenKeys.length === 0) {
            pushIfNotExist(this.menuOpenKeys, menu.id)
          }
        }
      })
      this.autoSelectedKeys()
    },
    /** 自动选中当前路由的菜单，自动展开当前菜单的父级 */
    autoSelectedKeys() {
      let fullPath = this.$route.fullPath
      let menuName = null
      let selectedKeys = []
      if (this.recycleBinMenu.path === fullPath) {
        menuName = '回收站'
        selectedKeys = [this.recycleBinMenu.key]
      } else {
        for (let key of Object.keys(this.appSystemMenu)) {
          let value = this.appSystemMenu[key]
          if (fullPath === value.path) {
            selectedKeys = [key]
            menuName = value.name
            pushIfNotExist(this.menuOpenKeys, 'app-system')
            break
          }
        }
        if (menuName == null) {
          recursionMenuList(this.menuList, (menu, parent, doBreak) => {
            // 自动选中当前的路由
            if (fullPath === menu.routerLink) {
              selectedKeys = [menu.id]
              menuName = menu.menuName
              // 如果是子级，那么就自动展开父级菜单
              if (parent) {
                pushIfNotExist(this.menuOpenKeys, parent.id)
              }
              doBreak()
            }
          })
        }
      }
      this.selectedKeys = selectedKeys
      this.$emit('menu-name', menuName)
    },

  },
}
</script>

<style scoped>

</style>